<template>
    
    <div>
        <div class="header"> 
        <div class="left">
            <div style="padding:0 100px">看课系统</div>
            <div :class="{active:getUrl=='/index'}" @click='go("/index")'>首页</div>
            <div :class="{active:getUrl=='/cart'}"  @click='go("/cart")'>收藏</div>
            <div :class="{active:getUrl=='/dizhi'}"  @click='go("/dizhi")'>历史记录</div>
            <div :class="{active:getUrl=='/dingdan'}"  @click='go("/dingdan")'>积分排行</div>
        </div>
        <div class="right">
            <el-button type="primary" @click='showLogin' v-if='!$store.state.user.id'>登录</el-button>
            <div v-else>
              <img v-if='$store.state.user.avatar' :src="$store.state.user.avatar" alt="" style="width: 50px;height: 50px;border-radius: 50%;margin-right: 10px;">
              {{$store.state.user.name}}

                  <el-button type="text" @click='logout' style="color:#fff;margin-left:20px">退出</el-button>
            </div>
        </div>

    </div>
    <el-dialog
  title="登录"
  :visible="$store.state.dialogVisible"
  width="400px"
  :before-close="handleClose">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">
  <el-form-item label="账号" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password" >
    <el-input v-model="ruleForm.password" type='password'  show-password></el-input>
  </el-form-item>
  </el-form>
    
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">登 录</el-button>
  </span>
</el-dialog>
    </div>

</template>
<script>
    import api from "@/api/index"
    export default {
        data() {
            return {
                dialogVisible: false,
                ruleForm: {},
                rules: {
                    name: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }, ],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }, ],
                }
            }
        },
        computed: {
            getUrl() {
                console.log(this.$route);
                return this.$route.path
            }
        },
        methods: {
            handleClose() {

                this.$store.commit("show", false)
            },
            showLogin() {
                this.$store.commit("show", true)
            },
            logout() {
                this.$store.commit("SET_USER", {})
                localStorage.removeItem("user")
                this.$message({
                    message: '退出成功',
                    type: 'success'
                });
                this.$router.push("/")
            },
            submitForm(formName) {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        console.log(api);
                        this.ruleForm.type=1
                        api.login(this.ruleForm).then(res => {
                            console.log(res, 1111);
                            if (res.code == 200) {
                                this.$store.commit("SET_USER", res.data)
                                localStorage.setItem('user', JSON.stringify(res.data))
                                this.$message({
                                    message: '登录成功',
                                    type: 'success'
                                });
                                this.$store.commit("show", false)
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            go(e) {
                this.$router.push(e)
            }
        },
    }
</script>

<style lang="scss" scoped>
    * {
        box-sizing: border-box;
    }
    
    .active {
        color: blue !important;
    }
    
    .header {
        width: 100%;
        height: 79px;
        border-bottom: 1px solid rgb(155, 155, 155);
        font-size: 18px;
        padding: 20px;
        color: white;
        background-color: cornflowerblue;
        display: flex;
        align-items: center;
        .center {
            >div {
                display: flex;
                justify-content: center;
            }
            flex-grow: 1;
        }
        .left {
            flex: 1;
            display: flex;
            >div:not(:nth-child(1)) {
                flex: 1;
                cursor: pointer;
                margin-right: 30px;
            }
        }
        .right {
            text-align: right;
            width: 300px;
        }
    }
</style>